<!DOCTYPE html>
<html>
    <head>
        <title>ms-attr-*</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./vendor/avalon/avalon.js" ></script>

        <script>
            avalon.define("ms-attr-*", function(vm) {
                vm.aaa = true
                vm.click = function() {
                    vm.aaa = !vm.aaa
                }
                vm.bbb = "@@@"
                vm.ccc = "&&&"
                vm.active = "active"
            })

        </script>
        <style>
            .active {
                background: goldenrod;
            }
            .readonly{
                border:1px solid blueviolet;
            }
        </style>

    </head>
    <body>
        <form method="get" action="aaa.html" ms-controller="ms-attr-*">
            <input ms-enabled="aaa" name="a1" value="12345"/>
            <input ms-disabled="aaa" name="a2" value="67890"/>
            <input ms-readonly="aaa" name="a3" ms-class="readonly: aaa" value="readonly" />

            <input ms-checked="aaa" type="checkbox" value="checkbox" name="a4"/>
            <select name="a5">
                <option>222</option>
                <option ms-selected="aaa">555</option>
            </select>
            <p>
                <input ms-attr-value="其他内容  {{ccc}}" name="a6" value="改"/>
                <input ms-attr-value="'其他内容 '+ccc" name="a7" value="改" />
                <input ms-value="其他内容  {{ccc}}" name="a8" value="改"/>
            </p>
            <button type="button" ms-click="click" ms-attr-class="active">
                点我
            </button>
            <input type="submit" value="提交" />
            <svg width="100" height="100">
            <circle ms-attr-cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
            </svg>
        </form>
    </body>
</html>